<template>
	<div class="bgc">
		<view class="top">

			<image src="../../static/styles/tabbaricons/starr.png" class="imgstar" mode=""></image>
			<view class="">选择星座</view>

		</view>
		<view class="cardbox">
			<view class="carda"  v-for="(item,i) in cardlist" :key='i'>
				<navigator :url="'../list/list?_id='+item._id">

					<view class="carddad">
						<view class="cardone">
							<!-- <text class="iconfont icon-baiyangzuo"></text> -->
							<image src="../../static/styles/tabbaricons/baiyang.png" mode=""></image>
							<view class=""> {{item.constellation}} </view>
							<view class=""> {{item.time}} </view>
						</view>
						<view class="cardtwo"></view>
					</view>
				</navigator>

			</view>
		</view>


		<view class="dibu">
			<text>欢迎 </text>
			<text> {{mobile}} </text>
			<text> 来到闹闹女巫店 </text>
		</view>


	</div>

</template>

<script>
	const db = wx.cloud.database()
	const whstar = db.collection('wh04star')
	export default {
		data() {
			return {
				cardlist: [],
				mobile: '',
			}
		},
		mounted() {
			// wx.cloud.getNetworkType()
			// wx.showLoading({title:'请求中'})
			whstar.get()
				.then(res => {
					// console.log(res)
					this.cardlist = res.data
					// console.log(this.cardlist)
				})
		},
		onLoad() {
			const mobile = wx.getStorageSync('mobile');
			if (mobile) {
				// console.log(mobile)
				this.mobile = mobile;
			}
		}
	}
</script>

<style>
	.bgc {
		width: 100%;
		min-height: 100vh;
		height: 100%;
		background-color: #ffffff;
		box-sizing: border-box;
	}

	.top {
		width: 100%;
		text-align: center;
		height: 200rpx;
		/* line-height: 200rpx; */
	}

	.imgstar {
		height: 150rpx;
	}

	.dibu {
		text-align: center;
		height: 150rpx;
		line-height: 150rpx;
	}

	.cardbox {
		width: 90%;
		min-height: 381px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

	}

	.carda {
		width: 150rpx;
		height: 150rpx;
		margin: 3%;
	}

	.carddad {
		width: 100%;
		height: 150rpx;
		position: relative;
		font-size: 28rpx;

	}

	.cardone {
		width: 100%;
		height: 100%;
		background-color: #fff;
		border-radius: 5%;
		position: absolute;
		top: -10rpx;
		left: -10rpx;
		text-align: center;
		border: 1px solid #000000;
	}

	.cardone image {
		width: 70rpx;
		height: 70rpx;
	}

	.cardtwo {
		width: 100%;
		height: 100%;
		border-radius: 5%;
		background: linear-gradient(90deg, #0066ff 0%, #cc00cc 100%);
		border: 1px solid #000000;
	}




	/* .bgcbox {
	  width: 100%;
	  height: 100%;
	  background-image: url(../../static/styles/images/13.jpg);
	  background-size: 120% 100%;
	  background-repeat: no-repeat;
	  background-position: 0 0;
	  overflow: hidden;
	  position: relative;
	  animation: move 20s linear infinite;
	} */
</style>
